import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton';
import { View, Image, Text } from '@tarojs/components';
import {newHttp} from "../../utils/request";
import {
	TARO_ENV,
	GOODS_DETAIL_PRE_ORDER_TT,
	DETAIL_PRE_ORDER_TT
} from '../../constants/api';
import {GetRequest} from '../../utils/tools';
import Float from "../../components/float/float";
import './appointment.scss';

export default class AppointmentDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showLoading: true,
			statusTxt: "",
			appointmentStatus: "",
			appointmentId: "",
			uuid: "",
			reserve_date_start: "",
			reserve_date_end: "",
			preGoodData: {},
			preOrderData: {}
		};
	}

	componentDidMount() {
		const { uuid, appointmentId } = Taro.getCurrentInstance().router.params;
		this.setState({ uuid, appointmentId });
	}
	async componentDidShow() {
		await Taro.setNavigationBarTitle({
            title: '预约详情'
        })
		Taro.showLoading({
			title: "请稍等..."
		});
		this.getPreOrderDetail(this.state.uuid);
	}

	// detail pre order
	async getPreOrderDetail(uuid) {
		const resGood = await newHttp.catchGet(GOODS_DETAIL_PRE_ORDER_TT, { uuid });
		const resOrder = await newHttp.catchGet(DETAIL_PRE_ORDER_TT, { uuid });

		if(resGood) {
			this.setState({ preGoodData: resGood.data });
		}
		if(resOrder) {
			let statusTxt = "", appointmentStatus = "", reserve_date_start = "", reserve_date_end = "";
			const status = ["预约中","成功", "失败", "取消"]
			const status2 = ["预约中","预约成功", "预约失败", "取消预约"]
			this.setState({ preOrderData: resOrder.data });

			if(resOrder.data.deal_status === -1) {
				statusTxt = "待预约";
				appointmentStatus = "待预约";
			}else {
				statusTxt = status[resOrder.data.deal_status];
				// 查看预约单：is_use 1 : 已使用   1&&1：预约完成，deal_status: 1(成功）
				if(resOrder.data.is_use !== "" && resOrder.data.is_use !== null) {
					if(resOrder.data.is_use === 1 && resOrder.data.deal_status === 1) {
						appointmentStatus = "预约成功";
					}else {
						appointmentStatus = status2[resOrder.data.deal_status];
					}
				}else {
					appointmentStatus = status2[resOrder.data.deal_status];
				}
			}

			if(resOrder.data.reserve_date_range) {
				const reserve_date_range = JSON.parse(resOrder.data.reserve_date_range);
				reserve_date_start = reserve_date_range.start;
				reserve_date_end = reserve_date_range.end;
			}
			this.setState({ statusTxt, appointmentStatus, reserve_date_start, reserve_date_end });
		}
		Taro.hideLoading();
	}

	render() {
		const {
			showLoading,
			appointmentStatus,
			preGoodData,
			preOrderData,
			statusTxt,
			reserve_date_start
		} = this.state;

		return(
			<View className='appointment-detail-page'>
				<View className="apt-title">{ appointmentStatus }</View>

				<View className="apt-block goods-info">
					<Image className="img" src={preGoodData.img} />

					<View className="info-block">
						<View className="name">
							<View className="product-name">{ preGoodData.good_name }</View>
							{
								preGoodData.buy_amount &&
								<View className="num">x { preGoodData.buy_amount }</View>
							}
						</View>
						{/*<View className="date" v-if="preGoodData.good_valid_start && preGoodData.good_valid_end">
							<Text className="sd">{ preGoodData.good_valid_start }</Text>
							<Text className="sep">至</Text>
							<Text className="ed">{ preGoodData.good_valid_end }</Text>
						</View>*/}
						<View className="price">
							<Text className="text-1 text-label">￥</Text>
							{
								preGoodData.actual_amount &&
								<Float value={preGoodData.actual_amount} />
							}
						</View>
					</View>
				</View>

				<View className="apt-block apt-code">
					<View className="apt-code-box">
						<Image className="code-img" src={preOrderData.code_url}></Image>
						{
							preOrderData.is_use === 1 &&
							<View className="mask">
								<Text>已使用</Text>
							</View>
						}
					</View>
					<View className="code-num">{ preOrderData.ticket }</View>
				</View>

				<View className="apt-block order-info">
					<View className="detail-block">
						<View className="label">预约时间</View>
						<View className="right">{ preOrderData.add_date }</View>
					</View>
					<View className="detail-block">
						<View className="label">预定时间</View>
						<View className="right">{ reserve_date_start }</View>
					</View>
					<View className="detail-block">
						<View className="label">预定状态</View>
						<View className="right">{ statusTxt }</View>
					</View>
					<View className="detail-block">
						<View className="label">审核状态</View>
						<View className="right">{ statusTxt }</View>
					</View>
					<View className="detail-block">
						<View className="label">预约数量</View>
						<View className="right">{ preOrderData.total_num }</View>
					</View>
					<View className="detail-block">
						<View className="label">客人姓名</View>
						<View className="right">{ preOrderData.linkman }</View>
					</View>
					<View className="detail-block">
						<View className="label">联系电话</View>
						<View className="right">{ preOrderData.phone }</View>
					</View>
					<View className="detail-block">
						<View className="label">证件信息</View>
						<View className="right">{ preOrderData.identity_num }</View>
					</View>
					<View className="detail-block">
						<View className="label label-code">预约码</View>
						<View className="right">{ preOrderData.ticket }</View>
					</View>
					{/* <View className="detail-block">
						<View className="label">使用次数</View>
						<View className="right">{ preOrderData.ticket }次</View>
					</View>
					<View className="detail-block">
						<View className="label">预约码剩余次数</View>
						<View className="right">{ preOrderData.ticket }次</View>
					</View>
					<View className="detail-block">
						<View className="label">允许取消次数</View>
						<View className="right">{ preOrderData.ticket }次</View>
					</View>
					<View className="detail-block">
						<View className="label">剩余取消次数</View>
						<View className="right">{ preOrderData.ticket }次</View>
					</View> */}
					<View className="detail-block">
						<View className="label">备注</View>
						<View className="right">{ preOrderData.remark }</View>
					</View>
				</View>
			</View>
		)
	}
}
